---
title: Markdown
---

Allow the assistant to display rich text using markdown.

import { Step, Steps } from "fumadocs-ui/components/steps";
import { Callout } from "fumadocs-ui/components/callout";
import { InstallCommand } from "@/components/docs/install-command";

<Callout>
  Markdown support is already included by default in the `Thread` component.
</Callout>

## Enabling markdown support

<Steps>

<Step>
### Add `markdown-text`

<InstallCommand shadcn={["markdown-text"]} />

This adds a `/components/assistant-ui/markdown-text.tsx` file to your project, which you can adjust as needed.

</Step>

<Step>

### Use it in your application

Pass the `MarkdownText` component to the `MessagePrimitive.Parts` component

```tsx twoslash title="/components/assistant-ui/thread.tsx" {1,11}
// @filename: /components/assistant-ui/markdown-text.tsx
import { FC } from "react";
export const MarkdownText: FC = () => null;

// @filename: ./thread.tsx
import { FC } from "react";
import { MessagePrimitive } from "@assistant-ui/react";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";

const AssistantActionBar: FC = () => null;
const BranchPicker: FC<{ className?: string }> = () => null;

// ---cut---
import { MarkdownText } from "@/components/assistant-ui/markdown-text";

const AssistantMessage: FC = () => {
  return (
    <MessagePrimitive.Root className="...">
      <div className="...">
        <MessagePrimitive.Parts components={{ Text: MarkdownText }} />
      </div>
      <AssistantActionBar />

      <BranchPicker className="..." />
    </MessagePrimitive.Root>
  );
};
```

</Step>

</Steps>

## Syntax highlighting

Syntax Highlighting is not included by default, see [Syntax Highlighting](/docs/ui/SyntaxHighlighting) to learn how to add it.
